@import './variable.scss';


::v-deep .operator-dialog {
  // width: 900px;
  width: 55%;
  height: 70%;
  background-color: #1a4969;

  .default-divider {
    background-color: rgba(#dcdfe6, 0.8);
    margin: 0;
  }

  .person-item {
    display: flex;
    align-items: center;
    // margin-left: 20px;
    margin-bottom: px(10);

    .person-avator {
      margin-left: px(50);
      width: px(100);
      min-width: px(100);
      height: px(120);
      border: 1px solid gray;

      img {
        width: px(100);
        height: px(120);
      }
    }
  }

  .el-dialog__header {
    padding: px(10) px(20);
    text-align: center;
    .el-icon-close,
    .el-dialog__title {
      color: #fff;
      font-size: px(18);
      line-height: px(24);
      height: px(24);
    }
  }

  .el-dialog__body {
    padding: px(10) px(20) 0;
    height: calc(100% - #{px(106)});

    .operator-scrollbar {
      width: 100%;
      height: 100%;
    }

    .operator-scrollbar__wrap {
      width: auto;
      overflow-x: hidden;
    }

    .el-form {
      height: 100%;
      .el-form-item__error{
        font-size: px(12);
        line-height: px(20);
        padding: 0;
      }
      .el-form-item {
        display: flex;
        margin-bottom: px(22);
        margin-right: px(10);
        &__content {
          color: #fff;
          line-height: px(34);
        }
        &__label {
          color: #fff;
          line-height: px(32);
          font-size: px(16);
          color: #fff;
          width: px(150);
        }
        .el-input__inner {
          width: px(250);
          height: px(32);
          line-height: px(32);
          background-color: #1a4969;
          border: 1px solid rgba(gray, 0.8);
          color: #fff;
          font-size: px(16);
        }
        .el-select .el-input__inner{
          height: px(32) !important;
        }
        .el-select .el-input .el-select__caret,.el-input .el-input__clear{
          font-size: px(14);
        }
        .el-select .el-input__icon{
          line-height: px(32)
        }

        .el-switch {
          .el-switch__label * {
            font-size: px(14);
          }
          .el-switch__label {
            color: #ffffff;
            height: px(20);
            line-height: px(20);
            font-size: px(14);
            &.is-active {
              color: #13ce66;
            }
          }
          .el-switch__core {
            height: px(20);
            width: px(40) !important;
            border-radius: px(10);
            &::after {
              width: px(16);
              height: px(16);
              top: px(1);
              left: px(1);
            }
          }
          .el-switch__label--left {
            margin-right: px(10);
          }
          .el-switch__label--right {
            margin-left: px(10);
          }
        }
        .el-switch.is-checked .el-switch__core::after {
          margin-left: px(18);
        }
      }

      .form-item-group {
        margin: px(5) 0;
        .svg-button {
          height: px(32);
          display: flex;
          align-items: center;
          margin-bottom: px(5);
        }
      }

      .group-item {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;

        .svg-icon {
          width: px(19);
          height: px(19);
          margin-right: px(5);
          cursor: pointer;
        }

        .add-label {
          color: #fff;
          cursor: pointer;
        }

        &.add {
          margin-left: -1px;
          font-size: px(13);
          label {
            margin-left: px(3);
          }
          .valid-rule {
            color: #f56c6c;
            margin-left: px(20);
            font-size: px(13);
          }
        }

      }

      .el-textarea__inner {
        font-size: px(14);
        width: px(540);
        background-color: #1a4969;
        border: 1px solid rgba(gray, 0.8);
        color: #fff;
      }
    }
  }

  .el-dialog__footer {
    padding: 0 px(30) px(10);
    .el-button {
      background-color: #1a4969;
      color: #fff;
      height: px(32);
      width: px(70);
      font-size: px(14);
      border-radius: px(5);
      padding: 0;
      &:hover {
        background-color: #409eff;
      }
    }
  }

  .default-select-tree {
    right: px(30);
    position: absolute;
    bottom: 15%;
    height: px(400);
    width: px(220);
    background-color: #155175;
    border: 1px solid #fff;
    border-radius: px(7);

    .tree-scrollbar {
      border-radius: px(7);
      width: 100%;
      height: calc(100% - #{px(40)});
      // background-color: #172a47;
      background-color: #155175;

      .el-tree {
        background-color: #155175 !important;
        color: #fff;
        .el-tree-node__label{
          font-size: px(14);
        }
        .el-tree-node__content {
          height: px(34);
          cursor: default;
          background-color: #155175;
          &:hover {
            background-color: #616d70;
          }
        }
        .el-tree-node.is-current > .el-tree-node__content {
          background-color: #4daeea;
          color: #ffffff;
        }
        .el-checkbox__input.is-checked {
          .el-checkbox__inner {
            background-color: green;
            border-color: green;
          }
        }
      }
    }

    .tree-scrollbar__wrap {
      width: auto;
      overflow-x: hidden;
      margin-right: -#{px(20)} !important;
    }
    text-align: center;

    
  }
}